<template>
  <div class="album-container">
    <div>
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
      <el-button type="primary" plain @click="proxy.$refs.uploadImageRef.inputClick()">新增</el-button>
    </div>
    <div class="grids gridColumns5">
      <div class="grid-item positionRelative" v-for="(item,index) in tableData" :key="index">
        <div class="close flex">
          <div class="icon"><img src="https://cos.qcshejiao.com/qc/xcxui/ig/18211.png" alt="" @click="tableData.splice(index, 1)"></div>
        </div>

        <img :src="item.url" alt="" @click.stop="proxy.$refs.uploadImageRef.showPreview(item.url)">
        <el-input v-model="item.title" placeholder="请输入标题">
          <template #prepend>标题</template>
          <template #append><el-icon @click="proxy.$utils.downloadImage(item.url,item.title)">
              <Download />
            </el-icon></template>
        </el-input>
      </div>
    </div>
    <uploadImage ref="uploadImageRef" v-model="addBannerImgUrl" v-show="false"></uploadImage>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["info"]);
let tableData = ref([]);
let addBannerImgUrl = ref("");
let loading = ref(false);

async function getInfo() {
  tableData.value = await proxy.$apis.classAlbum({
    type: "query",
    data: { classId: props.info._id },
  });
}

async function save() {
  try {
    loading.value = true;
    tableData.value.forEach((element) => {
      element.classId = props.info._id;
    });
    await proxy.$apis.classAlbum({ type: "save", data: tableData.value });
    proxy.$utils.showToast("保存成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);

watch(
  () => addBannerImgUrl.value,
  (newValue, oldValue) => {
    if (newValue) {
      tableData.value.push({ url: newValue, title: "" });
      setTimeout(() => {
        addBannerImgUrl.value = "";
      }, 100);
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.grids {
  gap: 15px 15px; //上下间距 左右间距
  margin-top: 15px;
  .grid-item {
    position: relative;
    img {
      width: 100%;
      display: block;
      margin-bottom: 10px;
      border-radius: 10px;
    }
    .close {
      top: 0;
      right: 0;
      position: absolute;
      cursor: pointer;
      z-index: 1;
      .icon {
        border-radius: 50%;
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>

